<template>
  <el-card class="main-card" shadow="hover">
    <LfTabs :activeIndex="activeIndex" ref="lfTabsRef" :tabOptions="tabs"
          :onTopicClick="onTabChange"/>
    <!-- 问题列表 -->
    <QuestionList
      :activeTab="currentTab"
      :questions="props.questions"
      :loading="props.loading"
      @goDetail="goDetail"
    />
    
    <!-- 无数据时显示空状态 -->
    <div v-if="!props.loading && (!props.questions || props.questions.length === 0)" class="empty-state">
      <img src="/src/assets/empty-expert.svg" alt="暂无数据" class="w-24 h-24 mb-3 opacity-80" />
      <h3 class="empty-title">暂无数据</h3>
    </div>
  </el-card>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import QuestionList from './QuestionList.vue'
import LfTabs from '@/components/commonUI/LfTabs.vue'
const props = defineProps({
  tabs: Array,
  activeTab: String,
  questions: Array,
  loading: {
    type: Boolean,
    default: false
  }
})
const activeIndex = ref(0)
const emit = defineEmits(['update:activeTab'])
const currentTab = ref(props.activeTab)
onMounted(() => {
  const questionTab = sessionStorage.getItem('questionTab')
  if (questionTab) {
    currentTab.value = questionTab
    props.tabs.forEach((item,index)=>{
      if(item.id == questionTab){
        activeIndex.value = index
      }
    })
  }
})
watch(
  () => props.activeTab,
  (val) => {
    if (val !== currentTab.value) {
      currentTab.value = val
      props.tabs.forEach((item,index)=>{
        if(item.id == val){
          activeIndex.value = index
        }
      })
    }
  }
)
function onTabChange(index, id, name, scrollLeft) {
  currentTab.value = id
  activeIndex.value = index
  sessionStorage.setItem('questionTab', id)
  emit('update:activeTab', id)
}
const router = useRouter()
function goDetail(id) {
  // router.push(`/question/${id}?tab=${currentTab.value}`)
}
</script>

<style scoped>
.main-card {
  flex: 1 1 0;
  min-width: 0;
  /* max-width: 850px; */
  border-radius: 20px;
  box-shadow: 0 4px 32px 0 rgba(64, 158, 255, 0.06);
  background: #fff;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  min-height: 400px;
}


.empty-title {
  font-size: 18px;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 12px 0;
}

.empty-desc {
  font-size: 14px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
  max-width: 300px;
}
</style>
